<!--
  ~ Copyright (c) Jack魏 2024 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="页面表编辑页面">
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <meta name="description" content="页面表编辑页面">
  <meta name="author" content="Jack魏">
  <title>页面表编辑页面</title>
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- config 常用配置 -->
  <script type="text/javascript" th:src="@{/js/config.js}"></script>
  <!-- 常用工具类 -->
  <script type="text/javascript" th:src="@{/js/MyUtils.js}"></script>
  <!-- CSS -->
  <link type="text/css" rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
</head>
<body>
<div class="index-container">
  <form class="layui-form" action="" lay-filter="sys-page-filter" style="padding-top: 120px">
    <div class="layui-form-item">
      <label class="layui-form-label">分组</label>
      <div class="layui-input-block">
        <input type="text" name="group" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">页面名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" lay-verify="required" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">权限类型</label>
      <div class="layui-input-block">
        <select name="type" lay-verify="required">
          <option value="">请选择</option>
          <option value="1">目录</option>
          <option value="2">菜单</option>
          <option value="3">按钮</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">URL路径</label>
      <div class="layui-input-block">
        <input type="text" name="url" lay-verify="required" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">组件</label>
      <div class="layui-input-block">
        <input type="text" name="component" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">权限许可</label>
      <div class="layui-input-block">
        <input type="text" name="permission" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">访问方法</label>
      <div class="layui-input-block">
        <input type="text" name="method" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-block">
        <input type="number" name="sort" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"
               min="0" step="1" lay-affix="number">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图标</label>
      <div class="layui-input-block">
        <input type="text" name="icon" autocomplete="on" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block" style="top: 20px">
        <button type="submit" class="layui-btn" lay-submit lay-filter="sys-page-submit">确定</button>
      </div>
    </div>
  </form>
</div>

<script th:inline="javascript">
  // js里面Model取值，注意上面的需要使用内联js
  let currentItem = [[${page}]];
  let parentId = [[${parentId}]];
  let currentId = null;
  console.log(currentItem)

  layui.use(['form'], function () {
    var form = layui.form;
    var layer = layui.layer;

    if (currentItem) {
      currentId = currentItem.id;
      // 初始化
      form.val('sys-page-filter', {
        "name": currentItem.name,
        "group": currentItem.group,
        "type": currentItem.type,
        "url": currentItem.url,
        "component": currentItem.component,
        "permission": currentItem.permission,
        "method": currentItem.method,
        "sort": currentItem.sort,
        "icon": currentItem.icon,
      });
    }

    // 提交事件
    form.on('submit(sys-page-submit)', function (data) {
      var params = data.field; // 获取表单字段值
      params.id = currentId;
      params.parentId = parentId;
      console.log(params)

      // 此处可执行 Ajax 等操作
      let result = MyAjax(POST, params, 'editSysPage', {async: false, result: true, msg: false})
      if (isOk(result)) {
        console.log('关闭所有页面-----')
        // 关闭所页面
        layer.closeAll();
        parent.layer.closeAll();
      }
    });
  });

</script>
</body>
</html>